<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,user-scalable=none"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="index.css" />
    <title>suporka color game</title>
  </head>

  <body>
    <div class="container">
      <div class="wgt-home" id="page-one">
        <h1>辨色力测试</h1>
        <p>找出所有色块里颜色不同的一个</p>
        <a id="start" class="btn btn-primary btn-lg">开始挑战</a>
      </div>
      <header class="header">
        <h1>辨色力测试</h1>
      </header>

      <aside class="wgt-score"></aside>

      <section id="screen" class="screen"></section>

      <footer>
        <div>
          <a href="http://zxpsuper.github.io" style="color: #FAF8EF">
            my blog</a
          >
        </div>
        ©<a href="https://zxpsuper.github.io">Suporka</a> ©<a
          href="https://zxpsuper.github.io/Demo/advanced_front_end/"
          >My book</a
        >
        ©<a href="https://github.com/zxpsuper">My Github</a>
      </footer>
    </div>
  </body>
  <!-- <script src="index.js"></script> -->
  <script src="index.js"></script>
  <script>
    // 事件兼容方法，兼容ie
    function addEvent(element, type, handler) {
      if (element.addEventListener) {
        element.addEventListener(type, handler, false);
      } else if (element.attachEvent) {
        element.attachEvent("on" + type, handler);
      } else {
        element["on" + type] = handler;
      }
    }
    window.onload = function() {
      addEvent(document.querySelector("#start"), "click", function() {
        document.querySelector("#page-one").style.display = "none";
        new ColorGame({
          time: 30
        });
      });
    };
  </script>
</html>
